<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/myoa/javascripts/jquery-1.11.0.min.js"></script>
  <script src="<%=path %>/myoa/scripts/layui/lay/modules/laydate.js"></script> 
 <script src="<%=path %>/myoa/scripts/layui/layui.js" charset="utf-8"></script>
 <script src="<%=path %>/myoa/scripts/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="<%=path %>/myoa/scripts/css/bootstrap.min.css" />
 <link rel="stylesheet" href="<%=path %>/myoa/scripts/layui/css/layui.css"  media="all">
<title>日程安排</title>
</head>
<body>
<div id="content">
<div><a href="#">个人事务</a>>日程管理</div>
	<div>
		 <div style="border:1px red solid;width:276px;height:875px;margin:15px;margin-right:0px;float:left">
		 	<div id="dateborder" class="site-demo-laydate" style="width:100%;height:220px">
		 		<div class="layui-inline" id="test-n1"></div>
		 	</div>
		 </div>
		 <div style="border:1px red solid;width:750px;height:875px;margin:15px;float:left">
		<table id="listday" class="layui-table" lay-size="lg">
		 		<tr id="title">
			 		<th width="12%">时间</th>
			 		<th width="44%">上午</th>
			 		<th width="44%">下午</th>
		 		</tr>
		 		<tr valign="top" > 
			 		<td style="width:12%;" align="center" valign="top" id="testView"></td>
			 		<td class="d_out1" style="width:44%;" valign="top" title="双击添加日程"  v-on:dblclick="editschedule($event,1)">
			 			<input type="hidden" value="上午"/>
			 				部门日程：
			 			<div v-for="(sch,ind) in queryschedules">
			 		
			 				<font color="#0055aa" v-if="sch.schedule_time=='上午'&&sch.schedule_type=='部门日程'">{{sch.schedule_starttime}}-{{sch.schedule_endtime}}:{{sch.schedule_content}}</font>
			 			</div>
			 			个人日程：
			 			<div v-for="(sch,ind) in queryschedules">
			 			
			 				<font color="#0055aa" v-if="sch.schedule_time=='上午'&&sch.schedule_type=='个人日程'">{{sch.schedule_starttime}}-{{sch.schedule_endtime}}:{{sch.schedule_content}}</font>
			 			</div>
			 		</td>
			 		<td class="d_out1" style="width:44%;" valign="top" title="双击添加日程" v-on:dblclick="editschedule($event,2)">
			 			<input type="hidden" value="下午"/>
			 			部门日程：
			 			<div v-for="(sch,index) in queryschedules">
			 				<font color="#0055aa" v-if="sch.schedule_time=='下午'&&sch.schedule_type=='部门日程'">{{sch.schedule_starttime}}-{{sch.schedule_endtime}}:{{sch.schedule_content}}</font>
			 			</div>
			 			个人日程：
			 			<div v-for="(sch,index) in queryschedules">
			 				<font color="#0055aa" v-if="sch.schedule_time=='下午'&&sch.schedule_type=='个人日程'">{{sch.schedule_starttime}}-{{sch.schedule_endtime}}:{{sch.schedule_content}}</font>
			 			</div>
			 		</td>
		 		</tr>
		 	</table>
		 	
		 </div>
		 
	</div>
	<!-- 编辑日程弹出层 -->
	   <!-- 修改弹出层 -->
	<div class="modal fade" id="editschedule" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">添加日程</div>
                <div class="modal-body">
                <form action="<%=path %>/addschedule" id="addscheduleform">
                <table class="layui-table" lay-skin="nob">
             			<tr>
							<td>主题：</td>
							<td><input type="text" name="schedule_title" id="schedule_title">
							<input type="hidden" name="schedule_day" id="schedule_day">
							</td>
						</tr>
                		<tr>
							<td>内容：</td>
							<td><textarea id="schedule_content"  name="schedule_content" style="max-width: 425px; max-height: 46px; min-width:425px; min-height:46px;overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea></td>
						</tr>
						
						<tr>
							<td>开始时间：</td>
							<td><input type="text" name="schedule_starttime" id="schedule_starttime"></td>
						</tr>
						<tr>
							<td>结束时间：</td>
							<td><input type="text" name="schedule_endtime" id="schedule_endtime">
							<input type="hidden" name="schedule_time" id="schedule_time"></td>
							
						</tr>
						<tr>
							<td>部门日程：</td>
							<td>是：<input type="radio" name="schedule_type" value="部门日程"/> &nbsp; &nbsp;否：<input type="radio" name="schedule_type" value="个人日程"/></td>
						</tr>
						<tr>
							<td>发起人：</td>
							<td name="schedule_userid" id="schedule_userid">郑义</td>
						</tr>
                 </table>
                 </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" id="addschedulesubmit" v-on:click="addschedule()">提交</button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="<%=path %>/myoa/scripts/js/vue.js"></script>
<script type="text/javascript">

$(function(){
	var d = new Date();
	var str = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
	var weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
	
	var vm = new Vue({
	    el: "#content",
	    data: {
	     queryschedules:[]
	    },
	    methods:{
	    	//查询日程
	    	queryschedule:function(schedule_day){
	    		console.log("schedule_day"+schedule_day)
	    		$.ajax({
					url:"../queryschedule",
					data:{schedule_day:schedule_day},
					type:"post",
					dataType:"json",
					success:function(result){
						vm.queryschedules=result
						console.log(result)
					}
				})
	    	},
	    	//添加日程弹出层
	    	editschedule:function(event,a){
	    		var el = event.currentTarget;
	    		var date=$(el).siblings("#testView").html()
	    		var time=$(el).find("input[type='hidden']").val()
	    		var starttime;
	    		var stoptime;
	    		var str1=date.split(" ")[0];
	    		console.log("starttime="+str1+"   time"+time);
	    		if(a==1){
	    			$("#schedule_starttime").val(str1+" 08:00")
		    		$("#schedule_endtime").val(str1+" 11:59")
		    		
	    		}
	    		if(a==2){
	    			$("#schedule_starttime").val(str1+" 14:00")
		    		$("#schedule_endtime").val(str1+" 17:59")
	    		}
	    		$("#schedule_time").val(time)
	    		$("#schedule_day").val(str1)
	    		$("#editschedule").modal("show");
	    	},
	    	//添加日程提交
	    	addschedule:function(){
	    		$("#addscheduleform").submit();
	    	},
	    }
	});
	//页面加载时默认查询当天的日程
	vm.queryschedule(str);
	//日历插件
	lay('#testView').html(str+" "+weekArray[new Date(str).getDay()]);
	laydate.render({
		  elem: '#test-n1'
		  ,position: 'static'
		,showBottom: false		//是否显示底部栏
		  ,change: function(value, date){ //监听日期被切换
			  //点击某一日期查询该天的日程
			  vm.queryschedule(value);
		    lay('#testView').html(value+" "+weekArray[new Date(value).getDay()]);
		  }
		});
	
	//在原有的日期上加减天数
	function addDate(date,days){ 
	       var d=new Date(date); 
	       d.setDate(d.getDate()+days); 
	       var m=d.getMonth()+1; 
	       return d.getFullYear()+'-'+m+'-'+d.getDate(); 
	     } 
	
});

</script>
</html>
